<template>
  <!-- ckeditor 父元素 -->
  <div className="editor-view">

    标题：<el-input v-model="data.article.title" placeholder="请输入标题" style="width:25%"></el-input>
    简介：<el-input v-model="data.article.intro" placeholder="请输入简介" style="width:25%"></el-input>
    <el-button v-if="data.article.id" type="danger" icon="el-icon-delete" @click="deleteArticle" circle></el-button>
    <el-button v-if="readOnly" type="primary" icon="el-icon-edit" @click="editorArticle" circle></el-button>
    <el-button v-else type="primary" icon="el-icon-tickets" @click="save" circle></el-button>
    <ckeditor
        :editor="editor1"
        v-model="data.article.article"
        :config="editorConfig1"
        name="name"
        :disabled="readOnly"
    ></ckeditor>
  </div>
</template>

<script>
// 经典编辑器（$ npm install --save @ckeditor/ckeditor5-build-classic）
import Editor from '@ckeditor/ckeditor5-build-classic'

// 内联编辑器（$ npm install --save @ckeditor/ckeditor5-build-inline）
// import Editor from '@ckeditor/ckeditor5-build-inline'

// 气球编辑器（$ npm install --save @ckeditor/ckeditor5-build-balloon）
// import Editor from '@ckeditor/ckeditor5-build-balloon'

// 气球块编辑器（$ npm install --save @ckeditor/ckeditor5-build-balloon-block）
// import Editor from '@ckeditor/ckeditor5-build-balloon-block'

// 文档编辑器（$ npm install --save @ckeditor/ckeditor5-build-document）
// import Editor from '@ckeditor/ckeditor5-build-document'

// 文档分页编辑器（$ npm install --save @ckeditor/ckeditor5-build-document-paged）
// import Editor from '@ckeditor/ckeditor5-build-document-paged'

// 中文包（语言包都在 build 版本中，注意 ckeditor5-build-xxx，xxx 需要替换为安装的编辑器包路径)
import  '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn'
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import {MyCustomUploadAdapterPlugin} from "@/api/ckeditorUplodImg5";
import ArticleCard from "@/views/article/ArticleCard";
import {Article} from "@/class/Article";
export default {
  name:"ArticleEdit",
/*  components:{
    ckeditor:CKEditor.componment
  },*/
  data() {
    return {
      // ckeditor
      editorValue: "",
      editor1: ClassicEditor,
      editorConfig1: {
        // /编辑器配置
        language: "zh-cn", //语言
        extraPlugins: [MyCustomUploadAdapterPlugin], //图片上传
        uiColor: '#123456',
        removeButtons:"Anchor",
      },

      readOnly:true,
      // 编辑器对象
      editor: undefined,
      // 编辑内容
      editorData: '<p>Content of the editor</p>',
      // 编辑器配置
      editorConfig: {
        // 配置语言
        language: 'zh-cn'
        // 功能栏
        // toolbar: {
        //   items: ['Bold', 'Italic', 'Link' ...]
        // }
        // 更多的配置....
      },
      data:{
        article:{
          id:'',
          title:'',
          intro:'',
          createtime:'',
          article:''
        }
      }
    }
  },
  async mounted() {
    let id = this.$route.query.id;
    let article = await Article.getArticleById(id)
    if(article){
      this.data.article = article
    }else{
      await this.$router.push(ArticleCard)
    }
  },
  methods:{
    async save() {
      let result = await this.data.article.updateArticle()
      if(result) {
        this.successMessage("更新成功");
        this.readOnly=true
      }
    },
    editorArticle(){
      this.readOnly=false
    },
    async deleteArticle() {
      let result = await this.data.article.deleteArticle()
      if (result) {
        this.successMessage("删除成功");
        this.$router.push({
          name: "ArticleList"
        })
      }
    }
  }
}
</script>
